<template>
	<div class="newpayContainer">
		<div class="dialog animated" :class="open ? 'fadeIn' : 'fadeOut'" v-show="show" :style="{ visibility: visible ? 'visible' : 'hidden' }">
			<div class="panel animated" :class="open ? 'zoomIn' : ''">
				<div class="title">
					扫码支付
					<div class="close" @click="cancel()"></div>
				</div>
				<div class="box-ct">
					<el-button v-if="isShowBtn" :loading="true">扫码支付中</el-button>
					<div id="goods_qrcode"></div>
					<div class="pay_type">
						<div class="pay_icon" :style="{ background: payType.payIcon }"></div>
						<div class="pay_name">{{ payType.payName }}</div>
					</div>
					<div class="pay_money">
						<span style="color:#E51C23">￥{{ info.realMoney }}</span>
					</div>
					<div class="pay_course">{{ pay_title }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm;
var timeOut;
import QRCode from 'qrcodejs2'; // 引入qrcode
export default {
	data: function() {
		return {
			show: false,
			open: false,
			visible: false,
			data: {},
			clue: null,
			countList: [],
			pay_title: '',
			info: {},
			payType: {
				payIcon: '',
				payName: ''
			},
			isShowBtn:false
		};
	},
	methods: {
		init: function(clue, countList, info) {
			vm.show = true;
			setTimeout(function() {
				vm.open = true;
				vm.visible = true;
			}, 11);
			vm.isShowBtn = false;
			vm.clue = clue;
			vm.countList = countList;
			vm.info = info;
			console.log(vm.countList);
			let goods_name = '';
			let goods_id = '';
			let goods_money = '';
			vm.pay_title = ''; //课程、班级名称显示
			vm.payType.payIcon =
				info.payName == 'wxpay'
					? 'url(' + require('../../../assets/img/processing_center/wechat.png') + ') no-repeat center top /0.2rem 0.2rem'
					: 'url(' + require('../../../assets/img/processing_center/alipay.png') + ') no-repeat center top /0.2rem 0.2rem';
			vm.payType.payName = info.payName == 'wxpay' ? '微信支付' : '支付宝支付';
			//从选择的班级、课程、商品中获取信息
			countList.forEach(item => {
				if (item.type == '班级') {
					vm.pay_title += vm.pay_title == '' ? item.className : '、' + item.className;
					goods_name += goods_name == '' ? item.courseName : ',' + item.courseName;
					goods_money += goods_money == '' ? item.realMoney : ',' + item.realMoney;
				} else if (item.type == '课程') {
					vm.pay_title += vm.pay_title == '' ? item.name : '、' + item.name;
					goods_name += goods_name == '' ? item.courseName : ',' + item.courseName;
					goods_money += goods_money == '' ? item.realMoney : ',' + item.realMoney;
				}
			});

			let detail = {
				goods_name: goods_name,
				goods_num: goods_money,
				body: window.config.projectName + '- 支付'
			};
			//支付参数
			let paras = {
				outTradeNo: info.orderSigupId, //商户订单号
				totalFee: info.realMoney * 100,
				// totalFee: 1, //金额,暂时设为1分钱，便于测试
				body: window.config.projectName + '- 支付', //显示在支付界面的标题
				tradeType: 'NATIVE',
				detail: JSON.stringify(detail),
				productId: '1111',
				campusId: this.$store.state.campusId
			};
			//统一下单接口
			api.wxPay(paras).then(function(data) {
				if (data.resultCode == 2000) {
					vm.isShowBtn = true;
					vm.qrcode(data.info.codeUrl);
					let paras = {
						payType: 1,
						orderId: info.orderSigupId
					};
					vm.hasPaySuccess(paras);
				} else {
					vm.$message.error(data.message);
				}
			});
			//   this.qrcode(vm.data.marketLink);
		},
		/**
		 * 判断是否支付成功
		 */
		hasPaySuccess(paras) {
			timeOut = setTimeout(function() {
				api.wxPaySuccess(paras).then(function(data) {
					if (data.resultCode == 2000) {
						if (data.result.orderPayState == 2) {
							$('#goods_qrcode').html('');
							vm.$emit('ok', vm.countList, vm.info);
							//清除Timeout的定时器,传入id(创建定时器时会返回一个id)
							clearTimeout(timeOut);
							return;
						} else {
							vm.hasPaySuccess(paras);
						}
					} else {
						vm.$message.error(data.message);
					}
				});
			}, 5000);
		},
		cancel: function() {
			//隐藏弹窗
			vm.open = false;
			clearTimeout(timeOut);
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
				$('#goods_qrcode').html('');
			}, 500);
			vm.$emit('back');
		},
		/**生成二维码 */
		qrcode(url) {
			let qrcode = new QRCode('goods_qrcode', {
				width: 160,
				height: 160,
				text: url, // 二维码地址
				colorDark: '#000',
				colorLight: '#fff'
			});
		},
		/**复制到剪切板 */
		copyUrlToClipBord() {
			this.$refs.marketLink.select();
			let successful = document.execCommand('copy');
			if (successful) {
				this.$message({
					message: '成功复制到剪贴板',
					type: 'success'
				});
			} else {
				this.$message.error('该浏览器不支持点击复制到剪贴板');
			}
		}
	},
	created: function() {
		vm = this;
		vm.$once('hook:beforeDestroy', () => {
//			console.log('AAAAAAAAAAAAA');
			clearTimeout(timeOut);
		});
	},
	beforeDestroy: function() {
//		console.log('BBBBBBBBBBBBBBBBB');
		clearTimeout(timeOut);
	}
};
</script>
<style lang="scss">
.newpayContainer {
	.el-form-item__label {
		font-size: 0.16rem;
		color: #666666;
	}
	.el-checkbox__label {
		font-size: 0.16rem;
		color: #666666;
	}
	.box-ct {
		padding-bottom: 0.4rem;
		text-align: center;
		.el-input {
			width: 4.5rem !important;
		}
		.title-c {
			width: 100%;
			display: inline-block;
			margin-bottom: 0.1rem;
			margin-left: 0.3rem;
		}
		#goods_qrcode {
			display: flex;
			justify-content: center;
			margin: 0.05rem 0 0.05rem 0;
		}
		.el-button {
			border: 0rem solid #dcdfe6;
			border-color: #ffffff;
			color: #666666;
			padding: 0rem 0.1rem;
			font-size: 0.12rem;
		}
		.pay_type {
			overflow: hidden;
			width: 2rem;
			margin: 0 auto;
			.pay_icon {
				float: left;
				width: 0.2rem;
				height: 0.2rem;
				margin-left: 0.5rem;
			}
			.pay_name {
				float: left;
				margin-left: 0.1rem;
				font-size: 0.14rem;
			}
		}
		.pay_money {
			margin-top: 0.2rem;
			font-size: 0.2rem;
		}
		.pay_course {
			margin-top: 0.1rem;
			font-size: 0.16rem;
		}
	}
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
	width: 6rem;
}
</style>
